<template>
	<view>
		<view style="height:92upx;position:fixed;top:0;background-color:#FFFFFF;width:750upx;z-index:99;">
			<view @click="backto()" style="position:absolute;width:150upx;height:92upx;float:left;line-height:92upx;">
				<text class="iconfont" style="color:#666666;font-size:48upx;">&#xe617;</text>
			</view>
			<view style="text-align:center;height:92upx;line-height:92upx;color:#000000;font-size:34upx;font-weight:700;">申请提现</view>
			<view @click="rules()" style="width:150upx;height:92upx;float:right;margin-top:-92upx;line-height:92upx;">
				<text class="iconfont" style="color:#999999;font-size:24upx;">&#xe6eb;提现规则</text>
			</view>
		</view>
		<view style="width:750upx;height:92upx;"></view>
		<view class="scores">
			<view class="score_first">可提</view>
			<view class="score_second">{{score}}</view>
		</view>
		<view class="score_input_box">
			<view class="score_input_title">提现数额</view>
			<view class="score_input">
				<text>￥</text>
				<input v-model="inputData.score" placeholder="请输入提现数额" type="number" />
			</view>
		</view>
		<view class="line_bg"></view>
		<view class="withdraw_type">
			<view class="type_title">提现方式</view>
			<view class="type_box">
				<view class="card" @tap="activeTab(1)" :class="{active:inputData.type == 1}">
					<image src="../../static/card.png" mode="aspectFit"></image>
					<text>银行卡</text>
				</view>
				<view class="alipay" @tap="activeTab(2)" :class="{active:inputData.type == 2}">
					<image src="../../static/alipay.png" mode="aspectFit"></image>
					<text>支付宝</text>
				</view>
			</view>
		</view>
		<view class="line_bg"></view>
		<view class="input_box">
			<view class="input_list">
				<text>姓名：</text>
				<input type="text"  v-model="inputData.name" placeholder="请输入正确的开户人姓名" />
			</view>
			<view class="input_list">
				<text>账号：</text>
				<input type="text" v-model="inputData.account" placeholder="请输入正确的银行卡号或支付宝账号" />
			</view>
			<view class="input_list" v-if="inputData.type==1">
				<text>银行：</text>
				<input type="text" v-model="inputData.bank" placeholder="请输入正确的银行" />
			</view>
		</view>
		<view class="withdraw">
			<view @click="confirm">提交申请</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	export default {
		data() {
			return {
				score:'',
				inputData:{
					name:'',
					account:'',
					bank:'',
					type:1,
					money:0,
					score:''
				},
				withdrawRules:''
			}
		},
		onLoad:function(option){
			uni.setNavigationBarTitle({
				title: '积分提现'
			});
			this.score=option.score
			uni.request({
				url: request.common.baseUrl+'/api/index/systemSet',
				data: {},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						this.withdrawRules=res.data.data
					}
				}
			});
			
		},
		methods:{
			rules(){
				uni.navigateTo({
					url:"/pages/distribution/rules"
				})
			},
			activeTab(v){
				this.inputData.type=v
			},
			backto(){
				uni.navigateBack({
					delta:1
				})
			},
			confirm(){
				// this.inputData.money=this.inputData.score/this.withdrawRules.withdraw_score
				// this.inputData.money=parseInt(this.inputData.money*100)/100
				this.inputData.money=this.inputData.score
				if(this.inputData.type==1){
					if(!this.inputData.bank){
						uni.showToast({
							title:'请输入银行',
							icon: 'none',
							duration:2000
						})
					}
				}
				if(this.inputData.money<this.withdrawRules.withdraw_money_min){
					uni.showToast({
						// title:'经换算,您的提现金额过低',
						title:'您的提现金额过低',
						icon: 'none',
						duration:3000
					})
				}
				uni.request({
					url: request.common.baseUrl+'/api/distributor/withdraw',
					data: {
						token:uni.getStorageSync('keyToken'),
						score:this.inputData.score,
						money:this.inputData.money,
						type:this.inputData.type,
						name:this.inputData.name,
						account:this.inputData.account,
						bank:this.inputData.bank
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						console.log(res)
						if(res.data.code==200){
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000,
							})
							setTimeout(function () {
								uni.navigateBack({
									delta:1
								})
							}, 2000);
						}else{
							uni.showToast({
								title:res.data.msg,
								icon: 'none',
								duration:2000
							})
						}
					}
				});
			}
		}
	}
</script>

<style>
	
	@font-face {
	  font-family: 'iconfont';
	  src: url('@/static/font/iconfont.eot');
	  src: url('@/static/font/iconfont.eot?#iefix') format('embedded-opentype'),
		  url('@/static/font/iconfont.woff2') format('woff2'),
		  url('@/static/font/iconfont.woff') format('woff'),
		  url('@/static/font/iconfont.ttf') format('truetype'),
		  url('@/static/font/iconfont.svg#iconfont') format('svg');
	}
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 34upx;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
page{
	background-color:#fafafa;
}
.scores{
	background-image: linear-gradient(60deg,#1366ea,#3780f3,#488cf8);
	width:750upx;
	height:180upx;
	color:#FFFFFF;
}
.score_first{
	font-size:26upx;
	padding-top:40upx;
	margin-left:50upx;
}
.score_second{
	font-size:46upx;
	margin-left:50upx;
	margin-top:-16upx;
}
.score_input_box{
	height:140upx;
}
.score_input_title{
	margin:25upx 0upx 0upx 50upx;
	color:#3e3e3e;
}
.score_input text{
	float:left;
	margin-left:50upx;
	font-size:32upx;
	height:80upx;
	line-height:80upx;
	color:#3e3e3e;
}
.score_input input{
	font-size:24upx;
	color:#9f9b9b;
	height:80upx;
	line-height:80upx;
}
.line_bg{
	width:750upx;height:14upx;background-color:#f4f4f4;
}
.withdraw_type{
	height:200upx;
}
.type_title{
	margin:25upx 0upx 0upx 50upx;
	color:#3e3e3e;
}
.type_box{
	width:650upx;
	margin:25upx;
	display:flex;
}
.type_box view{
	margin-left:25upx;
	
}
.active{
	background:linear-gradient(to left top,#2ed50b 15%,transparent 15%);
}
.type_box image{
	height:50upx;
	width:50upx;
	padding:10upx 15upx;
}
.type_box text{
	padding-right:15upx;
}
.card{
	border:1upx solid #f6f6f6;
	border-radius:10upx;
	display:flex;
	align-items:center;
}
.alipay{
	border:1upx solid #f6f6f6;
	border-radius:10upx;
	display:flex;
	align-items:center;
}
.input_box{
	width:700upx;
	padding:25upx;
}
.input_list{
	width:700upx;
	padding-top:15upx;
	padding-bottom:15upx;
	border-bottom:1upx solid #f6f6f6;
	text-indent:20upx;
}
.input_list text{
	color:#111111;
	font-size:24upx;
	height:60upx;
	line-height:60upx;
}
.input_list input{
	width:500upx;
	color:#999999;
	font-size:24upx;
	display:inline-block;
	overflow:unset;
	height:60upx;
	line-height:60upx;
}
.withdraw{
	margin-top:50upx;
	text-align:center;
}
.withdraw view{
	background-color:#ff6101;
	color:#FFFFFF;
	font-size:28upx;
	width:650upx;
	height:80upx;
	line-height:80upx;
	margin:auto;
	border-radius:40upx;
}
</style>
